<template>
  <div class="home" style="height:calc(100vh - 64px)">
    <div style="margin:30px 10px 0px 10px;width:600px">
      <Card>
        <p slot="title" style="font-size:20px">操作</p>
        <Button type="success" size="large" @click="check">点击检测视频</Button>
        <Button type="primary" size="large" @click="downLoad" style="margin-left:20px">点击下载报表</Button>
      </Card>
    </div>
    <div style="margin:10px 10px">
      <Card>
        <p slot="title" style="font-size:20px">视频列表</p>
        <Spin fix v-if="spinShow">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
        </Spin>
        <VideoGrid :videoList="videoList" />
      </Card>
    </div>
  </div>
</template>

<script>
import VideoGrid from "@/components/videoGrid";
import {mapActions,mapState,mapGetters} from "vuex"

import {reqVideoIntergrity} from "@/api"

export default {
  components: {
    VideoGrid
  },
  data() {
    return {
      checked:false,
      spinShow:false
    };
  },
  computed:{
    ...mapState(["videoList"]),
    ...mapGetters(["todayCurrentTime"])
  },
  methods: {
    ...mapActions(["getVideolist","handleVideoIntergrity"]),
    async check() {
      this.spinShow = true
      let result = await reqVideoIntergrity()
      this.spinShow = false
      this.handleVideoIntergrity(result.videos)
      this.checked = true
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');
        const tHeader = ['视频名称','视频大小', '视频长度', '完整性'];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ['name', 'size','length', 'intergrity'];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.videoList;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.todayCurrentTime + '视频完整性报表');
      })
    },
    downLoad() {
      if(!this.checked){
        this.$Message.warning("请先检测视频完整性")
      }
      else{
        this.exportExcel()
      }
    }
  },
  mounted(){
    this.getVideolist()
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;
</style>